<template>
	<view class="content">
		<f-navbar title="选择店铺类目" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_top">
				<checkbox-group @change="checkboxChange">
					<view class="content_cellbox">
						<view class="content-cell" v-for="(item,index) in dataList" :key="index">
							<checkbox :value="item.id" :checked="item.ischecked" color="##FF0000" style="transform:scale(0.7)"
								class="round red" />{{item.title}}
						</view>
					</view>
				</checkbox-group>
			</view>
			<view class="bottom_box">
				<view class="bottom_btn" @click="onsubmit">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getMarksList,
		setGoodMarks
	} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				imgurl: getApp().globalData.imgurl,
				// ischecked: false,
				dataList: [],
				changeList:[],
				markvalue:'',
				markvalueList:[], 
			}
		},
		onLoad(options) {
			console.log(options.marksvalue);
			if(options.marksvalue){
				this.changeList = options.marksvalue.split(',')
			}
			let that = this
			
			this.getList()
			// console.log(this.changeList);
			// this.changeList.forEach(item=>{
			// 	console.log(item);
				// that.dataList.forEach(markitem=>{
				// 	console.log(markitem);
				// 	// if(markitem.marks_id==Number(item)){
				// 	// 	console.log(111);
				// 	// 	markitem.ischecked = true
				// 	// }
					
				// })
				// console.log(this.dataList);
			// })
			// for(var j=0;j<that.changeList.length; j++){
			// 	for(var i=0; i<that.dataList.length;i++){
			// 		var pid = Number(that.changeList[j]);
			// 		console.log(pid);
			// 		var id = that.dataList[i].marks_id
			// 		console.log(id);
			// 		if(pid==id){
			// 			console.log(111222);
			// 			that.dataList[i].ischecked = true
			// 			continue;
			// 		}
			// 	}
			// 	console.log(that.changeList);
			// }
			
		},
		methods: {
			// 点击保存
			onsubmit(){
				
				this.changeList.forEach(item=>{
					console.log(item);
					this.dataList.forEach(markitem=>{
						console.log(markitem);
						if(markitem.id==Number(item)){
							console.log(111);
							this.markvalueList.push(markitem.title)
						}
						
					})
					console.log(this.dataList);
				})
				console.log(this.markvalueList);
				this.markvalueList = this.markvalueList.join(',')
				console.log(this.markvalueList);
				var i = this.changeList.join(',')
				this.markvalue =i
				console.log(this.markvalue);
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				console.log(prevPage);
				prevPage.$vm.marksvalue = this.markvalue; //修改上一页data里面的messageId
				prevPage.$vm.markflag = this.markvalueList; //修改上一页data里面的messageId
				   uni.navigateBack({//返回
				     delta: 1
				   })
			},
			// 获取数据
			getList() {
				getMarksList({}).then(res => {
					console.log(res.data);
					res.data.forEach(i=>{
						i.ischecked = false
					})
					this.dataList = res.data
					this.changeList.forEach(item=>{
						console.log(item);
						this.dataList.forEach(markitem=>{
							console.log(markitem);
							if(markitem.id==Number(item)){
								console.log(111);
								markitem.ischecked = true
							}
							
						})
						console.log(this.dataList);
					})

				})
			},
			// 选择
			checkboxChange(e) {
				console.log(e);
				this.changeList = e.detail.value
				
				
			},
		},
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_top {
		width: 690rpx;
		/* height: 184rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 6rpx;
		padding: 40rpx 0rpx 0rpx 0rpx;
		box-sizing: border-box;
	}

	/*每个页面公共css */
	/* //设置圆角 */
	checkbox.round .wx-checkbox-input,
	checkbox.round .uni-checkbox-input {
		border-radius: 100rpx;
		border: 2rpx solid #FF0000;
	}

	/* //设置背景色 */
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input {
		background-color: #ffffff !important;
		border-color: #FF0000 !important;
		color: #FF0000 !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		content: '\2022';
	}

	/* //元素使用的时候就是使用 round 和 red */
	.content_cellbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.content-cell {
/* 		width: 33%; */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-bottom: 40rpx;
		/* line-height: 70rpx; */
	}

	.bottom_box {
		width: 100%;
		height: 98rpx;
		background: #FFFEFE;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_btn {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
</style>